<template>
  <view style="padding: 10rpx" class="box" @touchmove.stop.prevent="() => {}">
    <view class="canvasBox">
      <canvas
        class="my-canvas-cls"
        :disable-scroll="true"
        canvas-id="mycanvas"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
      ></canvas>
    </view>
    <view class="footer" v-if="footerShow" @touchmove.stop.prevent="() => {}">
      <view class="right" @click="clear">重新签字</view>
      <view class="left" @click="finish">{{ buttonText }}</view>
      <!-- <view class="close" @click="close">关闭</view> -->
    </view>
  </view>
</template>


<script>
import { baseURL } from '@/utils/http'
export default {
  data() {
    return {
      //绘图图像
      ctx: '',
      //路径点集合
      points: [],
      //签名图片
      SignatureImg: '',
      needJoin: false,
      buttonText: '确认提交',
    }
  },
  props: {
    footerShow: {
      type: Boolean,
      default: true,
    },
  },
  watch: {},
  onLoad(option) {
    this.needJoin = JSON.parse(option.needJoin)
    if (this.needJoin) {
      this.buttonText = '下一步'
    }
  },
  methods: {
    // createCanvas（）----该方法主要是创建了画布
    // touchstart（）----触摸开始，获取到起点
    // touchmove（）----触摸移动，获取到路径点
    // touchend（）----触摸结束，将未绘制的点清空防止对后续路径产生干扰
    // draw（）----绘制笔迹
    // clear（）----清空画布
    // finish（）----完成绘画并保存到本地

    createCanvas() {
      //创建绘图对象
      this.ctx = uni.createCanvasContext('mycanvas', this)
      //设置画笔样式
      this.ctx.lineWidth = 4
      this.ctx.lineCap = 'round'
      this.ctx.lineJoin = 'round'
    },
    touchstart(e) {
      let startX = e.changedTouches[0].x
      let startY = e.changedTouches[0].y
      let startPoint = {
        X: startX,
        Y: startY,
      }
      this.points.push(startPoint)
      //每次触摸开始，开启新的路径
      this.ctx.beginPath()
    },
    touchmove(e) {
      let moveX = e.changedTouches[0].x
      let moveY = e.changedTouches[0].y
      let movePoint = {
        X: moveX,
        Y: moveY,
      }
      this.points.push(movePoint) //存点
      let len = this.points.length
      if (len >= 2) {
        this.draw() //绘制路径
      }
    },
    touchend() {
      this.points = []
    },
    draw() {
      let point1 = this.points[0]
      let point2 = this.points[1]
      this.points.shift()
      this.ctx.moveTo(point1.X, point1.Y)
      this.ctx.lineTo(point2.X, point2.Y)
      this.ctx.stroke()
      this.ctx.draw(true)
    },
    clear() {
      let that = this
      uni.getSystemInfo({
        success: (res) => {
          let canvasw = res.windowWidth
          let canvash = res.windowHeight
          that.ctx.clearRect(0, 0, canvasw, canvash)
          that.ctx.draw(true)
          this.$emit('clear', res)
        },
      })
    },
    finish() {
      let that = this

      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        // complete:function(res){
        //   console.log(res);
        // },
        success: (res) => {
          this.upload(res.tempFilePath)
        },
      })
    },
    // close(){
    // 	this.$emit("close", res)
    // }
    upload(filePath) {
      uni.uploadFile({
        url: baseURL + '/upload',
        filePath: filePath,
        name: 'image',
        success: (uploadFileRes) => {
          let path = JSON.parse(uploadFileRes.data)
          this.$emit('input', path)
        },
      })
    },
    postUpdateById(src) {
      const that = this
      this.$http('post', this.$api.postUpdateById, {
        id: that.$store.state.houseInfo.loanId,
        signUrl: src,
      }).then(function (res) {
        that.toContract(src)
      })
    },
    toContract(src) {
      const that = this
      if (that.needJoin) {
        uni.redirectTo({
          url: '/pages/coBorrowerSignature/coBorrowerSignature',
        })
      } else {
        this.$http('get', this.$api.toContract, {
          loanId: this.$store.state.houseInfo.loanId,
          signPath: src,
        }).then(function (res) {
          uni.switchTab({
            url: '/pages/mine/mine',
          })
        })
      }
    },
  },
  mounted() {
    this.createCanvas()
  },
}
</script>



<style lang="scss" scoped>
.box {
  display: flex;
}

.canvasBox {
  border: 1px dashed #f37529;
  width: 80%;
  height: 70vh;
}

.my-canvas-cls {
  height: 100%;
  width: 100%;
  display: block;
  position: relative;
  background: #f6f6f6;
}

.footer {
  width: 20%;
  font-size: 14px;
  height: 150upx;
  padding-top: 40vh;
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;

  .left {
    background-color: #f37529;
    color: #fff;
    border-radius: 25rpx;
    padding: 10rpx 5rpx;
    border: 1px solid #f37529;
  }

  .right {
    background-color: #fff;
    color: #f37529;
    border-radius: 25rpx;
    padding: 10rpx 5rpx;
    border: 1px solid #f37529;
    margin-bottom: 10rpx;
  }

  // .close{
  // 	background-color: #fef0f0;
  // 	color: #fab6b6;
  // 	border-radius: 8rpx;
  // 	padding: 10rpx 15rpx;
  // 	border: 1px solid #fab6b6;
  // }
}

.but-class {
  margin-right: 40rpx;
}
</style>